<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            width: 300px;
            height: 80px;
            list-style: none;
            border: 1px solid;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 80px;
        }

        .blue>li {
            background-color: skyblue;
        }

        .pink>li {
            background-color: pink;
        }

        .box {
            width: 700px;
            margin: 50px auto;
            display: flex;
            justify-content: space-around;
            border: 2px solid;
        }

        .top {
            margin-left: 500px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="blue">
            <li>blue1</li>
            <li>blue2</li>
            <li>blue3</li>
            <li>blue4</li>
            <li>blue5</li>
        </ul>
        <ul class="pink">

            <li>pink1</li>
            <li>pink2</li>
            <li>pink3</li>
            <li>pink4</li>
            <li>pink5</li>
        </ul>
    </div>
    <button class="top">移动到最上</button>
    <button class="bottom">移动到最下</button>
    <button class="all">全部移动</button>



    <script>
        //top是关键字，指代顶层对象window
        let btn1 = document.getElementsByClassName('top')[0];
        let btn2 = document.getElementsByClassName('bottom')[0];
        let btn3 = document.getElementsByClassName('all')[0];

        let pink = document.getElementsByClassName('pink')[0];
        let blue = document.getElementsByClassName('blue')[0];

        btn1.onclick = function () {
            if(blue.firstElementChild){
                pink.insertBefore(blue.firstElementChild, pink.firstElementChild)
            }
        }
        btn2.onclick = function () {
            if(blue.lastElementChild){
                pink.appendChild(blue.lastElementChild)
            }

        }
        btn3.onclick = function () {
            // let children=blue.children;
            //[li2,li4]
            for(let i=0;i<blue.children.length;i++){
                 pink.appendChild(blue.children[i])
                 i--;
            }
        }


    </script>

</body>

</html>